<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>天气</title>
    <link rel="stylesheet" href="css/index.css"/>

</head>
<body>
    <div class="generate">
        <!--顶部搜索-->
        <div class="search">
            <p class="searchInput"><input type="text" placeholder="请输入"></p>
            <p class="seek">查询</p>
        </div>
        <!--中部天气展示-->
        <div class="weathers">
            <p id="address"></p>
            <p id="airQuality"></p>
            <ul id="weatherData">
                <li>
                    <p class="numberDays">周五</p>
                    <p class="wea"></p>
                    <p class="temperature">17 ~ 10℃</p>
                    <p class="weath">阴</p>
                    <p class="wind">东风微风</p>
                </li>
                <li>
                    <p class="numberDays">周六</p>
                    <p class="wea"></p>
                    <p class="temperature">15 ~ 10℃</p>
                    <p class="weath">晴</p>
                    <p class="wind">东风微风</p>
                </li>
                <li>
                    <p class="numberDays">周日</p>
                    <p class="wea"></p>
                    <p class="temperature">15 ~ 10℃</p>
                    <p class="weath">晴</p>
                    <p class="wind">东风微风</p>
                </li>
                <li>
                    <p class="numberDays">周一</p>
                    <p class="wea"></p>
                    <p class="temperature">15 ~ 10℃</p>
                    <p class="weath">晴</p>
                    <p class="wind">东风微风</p>
                </li>
            </ul>
        </div>
    </div>
</body>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
    var weather =
    {
        "currentCity": "西安",
        "pm25": "64",
        "indexList": [{
            "title": "穿衣",
            "des": "建议着薄外套、开衫牛仔衫裤等服装。年老体弱者应适当添加衣物，宜着夹克衫、薄毛衣等。",
            "tipt": "穿衣指数",
            "zs": "较舒适"
        }, {
            "title": "洗车",
            "des": "较适宜洗车，未来一天无雨，风力较小，擦洗一新的汽车至少能保持一天。",
            "tipt": "洗车指数",
            "zs": "较适宜"
        }, {
            "title": "感冒",
            "des": "天气较凉，较易发生感冒，请适当增加衣服。体质较弱的朋友尤其应该注意防护。",
            "tipt": "感冒指数",
            "zs": "较易发"
        }, {
            "title": "运动",
            "des": "阴天，较适宜进行各种户内外运动。",
            "tipt": "运动指数",
            "zs": "较适宜"
        }, {
            "title": "紫外线强度",
            "des": "属弱紫外线辐射天气，无需特别防护。若长期在户外，建议涂擦SPF在8-12之间的防晒护肤品。",
            "tipt": "紫外线强度指数",
            "zs": "最弱"
        }],
        "weatherData": [{
            "date": "周五 10月19日 (实时：12℃)",
            "dayPictureUrl": "http://api.map.baidu.com/images/weather/day/yin.png",
            "nightPictureUrl": "http://api.map.baidu.com/images/weather/night/yin.png",
            "weather": "阴",
            "wind": "东风微风",
            "temperature": "17 ~ 10℃"
        }, {
            "date": "周六",
            "dayPictureUrl": "http://api.map.baidu.com/images/weather/day/yin.png",
            "nightPictureUrl": "http://api.map.baidu.com/images/weather/night/xiaoyu.png",
            "weather": "阴转小雨",
            "wind": "东南风微风",
            "temperature": "16 ~ 11℃"
        }, {
            "date": "周日",
            "dayPictureUrl": "http://api.map.baidu.com/images/weather/day/xiaoyu.png",
            "nightPictureUrl": "http://api.map.baidu.com/images/weather/night/duoyun.png",
            "weather": "小雨转多云",
            "wind": "南风微风",
            "temperature": "17 ~ 8℃"
        }, {
            "date": "周一",
            "dayPictureUrl": "http://api.map.baidu.com/images/weather/day/duoyun.png",
            "nightPictureUrl": "http://api.map.baidu.com/images/weather/night/yin.png",
            "weather": "多云转阴",
            "wind": "西南风微风",
            "temperature": "20 ~ 9℃"
        }]
    }
    console.log(weather);
    $("#address").html(weather.currentCity);
    $("#airQuality").html(weather.weatherData[0].weather + ' ' + weather.weatherData[0].temperature);
</script>
</html>